<template>
	<div class="index">
		<swiper :data="swiperData"></swiper>
		<!--<advertisment :data="advertData"></advertisment>-->
		<!--<title1></title1>
		<news1></news1>
		<title2></title2>
		<news2 v-for="i in 2"></news2>
		<div class="dashed"></div>
		<title3></title3>
		<news3></news3>
		<title4></title4>
		<news3></news3>-->
	</div>
</template>

<script>
	import { mapState, mapMutations, mapActions } from 'vuex'
	import store from '@/store'

	import Swiper from '@/components/main/swiper'
	import Advert from '@/components/main/advert'
	import Title1 from '@/components/main/title1'
	import Title2 from '@/components/main/title2'
	import Title3 from '@/components/main/title3'
	import Title4 from '@/components/main/title4'
	import News1 from '@/components/main/news1'
	import News2 from '@/components/main/news2'
	import News3 from '@/components/main/news3'

	export default {
		name: 'index',
		components: {
			'swiper': Swiper,
			'advertisment': Advert,
			'title1': Title1,
			'title2': Title2,
			'title3': Title3,
			'title4': Title4,
			'news1': News1,
			'news2': News2,
			'news3': News3
		},
		computed: {
			...mapState({
				swiperData: state => state.IndexStore.swiper,
				advertData: state => state.IndexStore.advert[0]
			})
		},
		methods: {
			...mapMutations([
			]),
			...mapActions([
				'getIndexSwiperData'
			])
		},
		mounted: function() {
			this.getIndexSwiperData()
		}
		//		beforeCreate: function() {
		//			console.group('beforeCreate 创建前状态===============》');
		//			console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
		//			console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
		//			console.log("%c%s", "color:red", "message: " + this.message)
		//		},
		//		created: function() {
		//			this.getData()
		//			console.group('created 创建完毕状态===============》');
		//			console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
		//			console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
		//			console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
		//		},
		//		beforeMount: function() {
		//			console.group('beforeMount 挂载前状态===============》');
		//			console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
		//			console.log(this.$el);
		//			console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
		//			console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
		//		},
		//		mounted: function() {
		//			console.group('mounted 挂载结束状态===============》');
		//			console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
		//			console.log(this.$el);
		//			console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
		//			console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
		//		},
		//		beforeUpdate: function() {
		//			console.group('beforeUpdate 更新前状态===============》');
		//			console.log("%c%s", "color:red", "el     : " + this.$el);
		//			console.log(this.$el);
		//			console.log("%c%s", "color:red", "data   : " + this.$data);
		//			console.log("%c%s", "color:red", "message: " + this.message);
		//		},
		//		updated: function() {
		//			console.group('updated 更新完成状态===============》');
		//			console.log("%c%s", "color:red", "el     : " + this.$el);
		//			console.log(this.$el);
		//			console.log("%c%s", "color:red", "data   : " + this.$data);
		//			console.log("%c%s", "color:red", "message: " + this.message);
		//		},
		//		beforeDestroy: function() {
		//			console.group('beforeDestroy 销毁前状态===============》');
		//			console.log("%c%s", "color:red", "el     : " + this.$el);
		//			console.log(this.$el);
		//			console.log("%c%s", "color:red", "data   : " + this.$data);
		//			console.log("%c%s", "color:red", "message: " + this.message);
		//		},
		//		destroyed: function() {
		//			console.group('destroyed 销毁完成状态===============》');
		//			console.log("%c%s", "color:red", "el     : " + this.$el);
		//			console.log(this.$el);
		//			console.log("%c%s", "color:red", "data   : " + this.$data);
		//			console.log("%c%s", "color:red", "message: " + this.message)
		//		}
	}
</script>